<template>
    <div class="article">
        <h2>{{ typeTitle }}</h2>
        <el-divider></el-divider>
        <div class="article-item" v-for="item in articleList" :key="item.id" @click="selectItem(item.id)">
            <div class="article-item-title">{{ item.title }}</div>
            <div class="article-item-box">
                <div class="article-item-box-image">
                    <el-image fit="cover" :src="item.image"></el-image>
                </div>
                <div class="article-item-box-content">
                    <p class="desc">{{ item.desc }}</p>
                    <p class="date">{{ item.create_time }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, defineProps } from 'vue'
    const articles = ref([])
    defineProps({
        articleList: {
            type: Array,
            default: () => []
        },
        typeTitle: {
            type: String,
            default: ''
        }
    })
    
    const emit = defineEmits<{
    (e: 'item-selected', itemId: number | string): void;
    }>();
    const selectItem = (id: number | string) => {
        console.log(id)
        console.log('项目列表触发选中项目:', id);
        emit('item-selected', id);
    }
</script>
<style scoped>
    .article {
        background-color: #fff;
        padding: 16px;
        border: 1px solid #ddd;
    }

    .article h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .article-item {
        margin-bottom: 20px;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .article-item-box{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .article-item .article-item-box .article-item-box-image {
        width: 100px;
        height: 100px;
        margin-right: 12px;
    }
    .article-item .article-item-box-content {
        flex: 1;
    }

    .article-item .article-item-title {
        font-size: 18px;
        margin-bottom: 4px;
        font-weight: bold;
    }

    .article-item .desc {
        font-size: 14px;
        color: #555;
    }

    .article-item .date {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
</style>